<!--  -->
<template>
  <div class="shopping">
    <div class="head">
      <div class="hred"></div>
    </div>
    <div v-if="shopCarList.length != 0" class="shoppingcart">
      <div class="item">
        <!-- 商品 -->

        <div
          class="product"
          v-for="(item, index) in shopCarList"
          :key="item.id"
        >
          <van-swipe-cell :before-close="beforeClose">
            <div class="check">
              <!-- <input
                type="checkbox"
                :checked="item.isCheck"
                @click="ChangeShopState(index)"
              /> -->
              <van-checkbox class="input" v-model="item.isCheck" @click="ChangeShopState(index)" ></van-checkbox>
            </div>
            <div class="productimg">
              <img :src="item.imageurl" alt="" />
            </div>
            <div class="nameandprice">
              <div class="name">{{ item.name }}</div>
              <div class="price">￥{{ item.stock }}.00</div>
            </div>
            <div class="number">
              <van-stepper
                v-model="item.num"
                @plus="ChangeShopCar(0, item.id)"
                @minus="ChangeShopCar(1, item.id)"
                theme="round"
                button-size="22"
                disable-input
              />
            </div>
            <div class="active"></div>

            <template #right>
              <van-button
                square
                text="删除"
                @click="DelShop(item.id)"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </div>
      <!-- 去支付 -->
      <div class="totalandpay">
        <div class="che">
         <van-checkbox class="input" v-model="IsAllchecked" @click="AllCheck" ></van-checkbox>
          <!-- <input type="checkbox"  :checked="IsAllchecked" @click="AllCheck" /> -->
          <p>全选</p>
        </div>

        <div class="total">
          <p>应付合计￥{{ AllPrice }}</p>
        </div>
        <div class="pay">
          <button class="btnpay" @click="toPay">去结算</button>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty
        class="custom-image sho"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="请添加商品"
      />
    </div>
  </div>
</template>

<script>
import {
  GetShopList,
  DelShopCar,
  ChangeShopCar,
  DelShopCarList,
} from "@/network/shop/shop.js";
import { AddOredr } from "@/network/order/order.js";
import { Toast } from "vant";
export default {
  data() {
    return {
       radio: '1',
      shopInfo: {
        num: 10,
        img: "",
        price: "",
        productname: "",
        active: "",
      },
      //购物车列表
      shopCarList: [],
      IsAllchecked: true,
    };
  },
  methods: {
    async GetShop() {
      await GetShopList();
      this.shopCarList = JSON.parse(localStorage.getItem("shopCar"));
      //console.log(this.shopCarList);
    },
    beforeClose({ position, instance }) {
      switch (position) {
        case "left":
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          instance.close();
          break;
      }
    },
    async DelShop(sid) {
      const { data: res } = await DelShopCar({ sid: sid });
      if (res.message == "success") {
        await this.GetShop();
        Toast.success("删除成功");
      }
    },
    async ChangeShopCar(type, sid) {
      await ChangeShopCar({ sid: sid, type: type });
      await this.GetShop();
    },
    //单选
    ChangeShopState(index) {
      //this.shopCarList[index].isCheck = !this.shopCarList[index].isCheck;
      this.IsAllchecked = this.shopCarList.every((v) => v.isCheck == true);
      localStorage.setItem("shopCar", JSON.stringify(this.shopCarList));
    },
    //全选
    AllCheck() {
      //this.IsAllchecked = !this.IsAllchecked;
      this.shopCarList.forEach((v) => (v.isCheck = this.IsAllchecked));
      localStorage.setItem("shopCar", JSON.stringify(this.shopCarList));
      
    },
    //结算/生成订单
    async toPay() {
      let newShopCar = this.shopCarList.filter((v) => v.isCheck); //过滤后的数组
      let orderlist = [];
      newShopCar.forEach((v) =>
        orderlist.push({
          number: v.num,
          pid: v.pid,
        })
      );
      let data = {
        monery: this.AllPrice,
        orderlist: orderlist,
      };
      const { data: res } = await AddOredr(data);
      if (res.message == "success") {
        this.DelShopList()
        this.$router.push(`/index/order?oid=${res.oid}`);
      }
    },
    //删除生成订单的购物车信息
    async DelShopList() {
      let m=[]
      this.shopCarList.filter((v) =>v.isCheck).forEach(vm=>m.push(vm.id))
      if(m.length!=0){
        let mm=m.join(',')
        const res=  await DelShopCarList({idlist:mm})
        console.log(res)
      }
      
    },
  },
  activated() {
    this.GetShop();
  },
  computed: {
    AllPrice() {
      let All = 0;
      let newShopCar = this.shopCarList.filter((v) => v.isCheck); //过滤后的数组
      newShopCar.forEach((e) => {
        All = All + e.num * e.stock;
      });
      return All;
    },
  },
};
</script>
<style scoped lang="less">
@import "../assets/css/index.less";
.check_input{
  background-color: rgb(168, 62, 71);
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.shopping {
  width: 100vw;
  background-color: #f5f5f5;

  .head {
    width: 100vw;
    height: 199 * @vw;
    background-image: url(../assets/title.jpg);
    background-size: 100vw 199 * @vw;
    .hred {
      width: 100vw;
      height: 96 * @vw;
      background-color: #f18d94;
    }
  }
  .shoppingcart {
    width: 1380 * @vw;
    margin: 0 * @vw auto;
    background-color: #ffffff;
    .product {
      width: 1380 * @vw;
      margin: 0 * @vw auto;
      background-color: #ffffff;
      display: flex;

      .check {
        margin-left: 40 * @vw;
        width: 6%;
        height: 80px;
        margin-right: 30 * @vw;
        //line-height: 490 * @vw;
        display: inline-block;
        text-align: center;
        position: relative;
        .input {
          position: absolute;
          top: 150 * @vw;
          left: 4 * @vw;
        }
      }
      .productimg {
        display: inline-block;
        width: 20%;
        height: 280 * @vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .nameandprice {
        display: inline-block;
        width: 531 * @vw;
        height: 280 * @vw;
        .name {
          width: 531 * @vw;
          height: 128 * @vw;
          text-align: center;
          line-height: 128 * @vw;
          overflow: hidden;
        }
        .price {
          width: 531 * @vw;
          height: 152 * @vw;
          text-align: center;
          line-height: 152 * @vw;
        }
      }
      .number {
        display: inline-block;
        width: 414 * @vw;
        height: 400 * @vh;
        line-height: 280 * @vw;
        .btnsub {
          width: 78 * @vw;
          height: 82 * @vh;
          margin-right: 76 * @vw;
        }
        .btnsum {
          width: 78 * @vw;
          height: 82 * @vh;
          margin-left: 76 * @vw;
        }
      }
      .active {
        width: 1380 * @vw;
        height: 150 * @vw;
        margin: 0 * @vw auto;
        background-image: url(../assets/active.jpg);
        background-size: 1380 * @vw 150 * @vw;
      }
    }

    .totalandpay {
      width: 1380 * @vw;
      height: 205 * @vw;
      margin: 0 * @vw auto;
      padding-bottom: 200*@vw;
      display: flex;
      .che {
        width: 275 * @vw;
        height: 205 * @vw;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        p {
          margin-top: 10 * @vw;
          margin-left: 17 * @vw;
        }
        .input {
          margin-top: 40*@vw;
          margin-left: 40 * @vw;
        }
      }
      .total {
        width: 675 * @vw;
        height: 205 * @vw;
        margin-left: 45 * @vw;
        color: #dcb884;
      }
      .pay {
        width: 705 * @vw;
        height: 205 * @vw;
        line-height: 205 * @vw;
        .btnpay {
          width: 349 * @vw;
          height: 124 * @vw;
          margin-right: 57 * @vw;
          line-height: 124 * @vw;
          background-color: #f18d94;
          color: white;
          border-style: hidden;
          border-radius: 80 * @vw;
        }
      }
    }
  }
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.sho {
  margin-top: 500 * @vw;
  height: 144vw;
}
</style>